<template>
	<view>
		<uni-popup ref="tipsPopup" :maskClick="false">
			<view class="tips_popup-wrap">
				<view class="tips-icon"><image src="@/static/imgs/icons/tips-icon.png" mode="aspectFill"></image></view>
				<text class="tit">{{config.tit}}</text>
				<text class="p">{{config.content}}</text>
				<view class="btn" @click="handleConfirm">
					<view class="btn_content">
						<image v-if="config.icon && !hideBtn" class="icon" src="../../pagesUser/static/phone-icon.png"></image>
						{{config.btnText}}
					</view>
				</view>
				<uni-icons v-if="!hideBtn" @click="hide" class="close-icon" type="close" size="30" color="#cecece"></uni-icons>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			config: {
				type: Object,
				default() {
					return {
						btnText: '确定',
						tit: '温馨提示',
						content: '请补全信息',
						icon: ''
					}
				}
			},
			hideBtn: {
				type: Boolean,
				default() {
					return true
				}
			}
		},
		methods: {
			show() {
				this.$refs.tipsPopup.open()
			},
			hide() {
				this.$refs.tipsPopup.close()
			},
			handleConfirm() {
				this.$emit('confirm')
				this.hide()
			}
		}
	}
</script>

<style lang="scss" scoped>
.tips_popup-wrap {
	width: 560rpx;
	margin: 0 auto;
	padding: 50rpx 0;
	background-color: #fff;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	.close-icon {
		position: absolute;
		top: -30rpx;
		right: -30rpx;
		z-index: 9;
	}
	.tips-icon {
		width: 194rpx;
		height: 196rpx;
	}
	.tit {
		font-size: 34rpx;
		padding-top: 20rpx;
	}
	.p {
		font-size: 26rpx;
		padding: 30rpx 0 50rpx;
	}
	.btn {
		width:480rpx;
		height:80rpx;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		background:$blue;
		border-radius:10rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		.btn_content {
			display: flex;
			align-items: center;
			.icon {
				margin-right: 20rpx;
				width: 34rpx;
				height: 38rpx;
			}
		}
	}
}
</style>
